import React, { useEffect, useState, useRef } from 'react'
import { NavigationStackScreenComponent } from 'react-navigation-stack'
import { View, ScrollView, Text, TouchableOpacity } from 'react-native'
import { ShortBar, InfoLayout, Toast } from 'components'
import { BookItem } from './components'
import { tradListStyle as styles, recognitionListStyle } from './styles'
import { commonStyle, translateSize } from 'styles'
import pos, { PosAppTrade, PosCustomer, PosAppFee, PosAppBank } from 'api/pos';
import { getAuthorization, operate } from 'services/authorization';
import Loading from 'components/loading'
import { getMoneyFen } from 'utils';

/**
 * 收筹金
 * @param props
 */
const BookListScreen: NavigationStackScreenComponent<{
	// feeList: PosAppFee[]
	// customerInfo: PosCustomer
	data: any
	onNext: () => void
}> = props => {
	const [feeList, setFeeList] = useState<PosAppFee[]>([])
	const [bankList, setBankList] = useState<PosAppBank[]>([])
	const checkData = useRef<String[]>([])
	const [noData, setNoData] = useState(false)

	useEffect(() => {
		// let data = props.navigation.getParam('feeList')
		let feeInfo = [] as PosAppFee[]
		let bankInfo = [] as PosAppBank[]
		Loading.show()
		pos.posApp
			.getFee({
				...{
					scene: 'scj',
					projectId: getAuthorization().project.id
				}, ...props.navigation.getParam('data')
			})
			.then(res => {
				// res.customer && setCustomerData(res.customer)
				feeInfo = res.feeList && res.feeList.filter(f => f.customer) || []
				setFeeList(feeInfo)
				feeInfo.length < 1 && setNoData(true)
				bankInfo = res.bankList || []
				setBankList(bankInfo)
			}).finally(() => {
				Loading.hide()
			})
		props.navigation.setParams({
			onNext: () => {
				if (checkData.current.length == 0) {
					Toast.show('请选择款项')
					return
				}
				// let feeInfo = feeList
				let checkFeeList: PosAppFee[] = []
				let setFlag = false
				try {
					feeInfo.forEach((item: PosAppFee) => {
						if (checkData.current.indexOf(item.erpId) > -1) {
							if (getMoneyFen(item.ye) > getMoneyFen(item.fundAmount) - getMoneyFen(item.fundActual)) {
								Toast.show(`${item.fundName}本次收款金额不能超过款项余额`)
								throw new Error(`${item.fundName}本次收款金额不能超过款项余额`)
							}
							if (item.fundAmount === item.fundActual) {
								Toast.show(`${item.fundName}已收齐`)
								throw new Error(`${item.fundName}已收齐`)
							}
							if (!setFlag && item.ye <= 0) {
								setFlag = true
							}
							checkFeeList.push(item)
						}
					})
				} catch (e) {
					return
				}
				if (setFlag) {
					Toast.show(`请设置收款金额，收款金额必须大于0！`)
					return
				}
				console.log('222', feeInfo)
				props.navigation.navigate('RecognitionConfirm', {
					tradeInfo: { ...{ customer: { ...checkFeeList[0].customer } }, feeList: checkFeeList },
					bankList: bankInfo,
					scene: 'scj',
					// customerInfo: props.navigation.getParam('customerInfo'),
				})
			},
		})
	}, [])

	return (
		<View style={commonStyle.containerColumn}>
			{noData ? (<Text style={commonStyle.noDataWarn}>未找到认筹，请确认用户信息是否正确！</Text>) :
				(<ScrollView>
					<View style={commonStyle.containerColumn}>
						{feeList.map((item, index) => (
							<BookItem
								data={item}
								bankList={bankList}
								key={index.toString()}
								index={index}
								onChange={(money, isCheck) => {
									let data = checkData.current
									if (item.erpId && !isCheck) {
										data = checkData.current.filter(checkId => checkId != item.erpId)
									} else {
										data.push(item.erpId)
									}
									// item.ye = money
									let newFeeList = feeList.map((fee) => {
										if (fee.erpId === item.erpId) {
											fee.ye = money
										}
										return fee
									})


									checkData.current = data
									setFeeList(newFeeList)
								}}
							/>))}
					</View>
				</ScrollView>)}
		</View>
	)
}

BookListScreen.navigationOptions = props => {
	return {
		title: '收筹金',
		headerRight: (
			<TouchableOpacity
				style={recognitionListStyle.headerRight}
				onPress={() => {
					operate()
					props.navigation.getParam('onNext')()
				}}>
				<Text style={recognitionListStyle.headerFont}>确认</Text>
			</TouchableOpacity>
		),
	}
}

export default BookListScreen
